<script setup lang="ts">
import CardItem from './CardItem.vue'
import BarItem from './BarItem.vue'
import { ref } from 'vue'
const active = ref(0)
const cards = [
  { id: 1, title: '基础版', price: '5' },
  { id: 2, title: '专业版', price: '10' },
  { id: 3, title: '高级版', price: '20' }
]
</script>

<template>
  <div class="price-table-frame">
    <div class="container">
      <div class="cards-container">
        <CardItem
          v-for="card in cards"
          :key="card.id"
          v-bind="card"
          @mounseenter="active = card.id"
          @mouseleave="active = 0"
        />
      </div>
      <div class="benefits">
        <BarItem min-desc="5 Users" max-desc="100 Users" :active="active === 1" :scale-x="0.28" />
        <BarItem min-desc="20 GB" max-desc="200 GB" :active="active === 2" :scale-x="0.69" />
        <BarItem
          min-desc="1 Project"
          max-desc="50 Projects"
          :active="active === 3"
          :scale-x="0.5"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.price-table-frame {
  background-color: transparent;
  height: 100%;
  .container {
    margin: 0 auto;
    width: 600px;
    background-color: rgb(202, 205, 207);
    box-shadow: 2px 6px 5px rgba(32, 61, 127, 0.3);

    .cards-container {
      padding: 25px 0px;
      display: flex;
      justify-content: space-around;
    }

    .benefits {
      background-color: #fff;
      padding: 20px;
    }
  }
}
</style>
